<template>
  <div class="authorize">
    <div class="authorize-header">
      <img :src="authInfo.clientIcon" alt="">
      <div class="title">{{authInfo.clientName}}</div>
    </div>
    <el-card class="authorize-card">
      <div class="card-top">
        <div class="authorize-detail">
          <div class="detail-left"></div>
          <div class="detail-right">
            <div class="detail-right-title">授权单点登录站</div>
            <div class="detail-right-desc">想要获取您的账户{{authInfo.account}}的权限</div>
          </div>
        </div>
        <div class="authorize-detail">
          <div class="detail-left">
            <img v-if="authInfo.avatar" :src="authInfo.avatar" alt="">
            <i v-else class="iconfont">&#xe62f;</i>
          </div>
          <div class="detail-right">
            <div class="detail-right-title">授权后，将获得以下用户数据</div>
            <div class="detail-right-desc">获得您的昵称、头像、和其他用户个人信息</div>
          </div>
        </div>
      </div>
      <div class="card-bottom">
        <div class="authrize-btns">
          <el-button type="danger" size="large" @click="handleReject">拒绝</el-button>
          <el-button type="primary" size="large" @click="handleAgree">同意</el-button>
        </div>
        <div class="authrize-link">
          授权后表明你已同意<span class="protocol"> 锐狐互联网站点服务协议 </span>
          <p class="link">{{authInfo.redirect_uri}}</p>
        </div>
      </div>
    </el-card>
    <div id="form-container"></div>
  </div>
</template>

<script setup>
/* eslint-disable */
import { computed, ref, onBeforeMount, onMounted } from 'vue'
import { doConfirm, isLogin, getAuthInfo, authorize } from '@/api/login'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
//授权地址信息
const authRoute = computed(() => {
  return route.query
})
console.log(authRoute.value, 777)
const handleReject = () => { }
const handleAgree = async () => {
  let res = await doConfirm(authRoute.value)
  if (res && res.code === 200) {
    try{
      // const form = document.createElement('form')
      // form.action = "http://10.10.0.29:8001/oauth2/authorize?client_id=" + authRoute.value.client_id + '&response_type=' + authRoute.value.response_type + '&redirect_uri=' + authRoute.value.redirect_uri + '&scope=' + authRoute.value.scope
      // console.log(form.action,1616)
      // document.getElementById("form-container").appendChild(form)
      // form.submit()
      // document.getElementById("form-container").removeChild(form)
      // await authorize(authRoute.value)
      // window.location.href = 'http://127.0.0.1:8080/?code=J7cfTV1p9rtniPVXZGuWScAyZlYPpLlQ7Fi4VYDALlayvwjbX5BvzF43tZJd'
      window.location.href = 'http://10.10.0.29:8001/oauth2/authorize?client_id=' + authRoute.value.client_id + '&response_type=' + authRoute.value.response_type
  + '&redirect_uri=' + authRoute.value.redirect_uri + '&scope=' + authRoute.value.scope
    }catch{

    }finally{
      console.log(window.location.href, 888)
    }
  }
}
// var link = document.createElement('a');
// link.href = 'http://127.0.0.1:8081/login/authorize?client_id=' + authRoute.value.client_id + '&response_type=' + authRoute.value.response_type
//   + '&redirect_uri=' + authRoute.value.redirect_uri + '&scope=' + authRoute.value.scope;
// link.target = '_blank'
// console.log(link.href, 888)
// link.click()
//授权用户信息
const authInfo = ref({})
const _getAuthInfo = async () => {
  let res = await getAuthInfo({ clientId: authRoute.value.client_id })
  if (res && res.code === 200) {
    authInfo.value = res.data
  }
}
onMounted(() => {
  window.onerror = function(message, url, line, column, error) {
    // 处理错误
    console.error('发生错误：', message, error, 565656);
  };
})
onBeforeMount(async () => {
  let res = await isLogin()
  if (!res.data) {
    router.push({
      path: '/login',
      query: route.query
    })
  }
  await _getAuthInfo()
})
</script>

<style lang='scss' scoped>
.authorize{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    .authorize-header{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 40px;
        img{
            margin-bottom: 20px;
            width: 6rem;
            border-radius: 50%;
        }
        .title{
            font-size: 24px;
        }
    }
    .authorize-card{
        width: 500px;
        .card-top{
            border-bottom: 1px solid #ebeef5;
            .authorize-detail{
                display: flex;
                align-items: center;
                margin-bottom: 40px;
                .detail-left{
                    margin-right: 15px;
                    width: 40px;
                    height: 40px;
                    overflow: hidden;
                    i{
                        font-size: 40px;
                        color: #aaa;
                    }
                    img{
                      width: 100%;
                    }
                }
                .detail-right{
                    .detail-right-title{
                        margin-bottom: 5px;
                        font-size: 16px;
                        color: #24292e;
                    }
                    .detail-right-desc{
                        font-size: 14px;
                        color: #586069;
                    }
                }
            }
        }
        .card-bottom{
            padding-top: 30px;
            .authrize-btns{
                display: flex;
                flex-wrap: nowrap;
                margin-bottom: 30px;
                .el-button{
                    width: 100%;
                }
            }
            .authrize-link{
                text-align: center;
                color: #586069;
                .link{
                    margin-top: 5px;
                    color: #24292e;
                }
                .protocol{
                    color: #E9686B;
                    text-decoration: underline;
                    cursor: pointer;
                }
            }
        }
    }
}
::v-deep .el-card__body{
    padding: 40px;
}
</style>